<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="box" class="div1">
        div元素
    </div>
    <br>
    <p>这是段落</p>
    <p>这是段落</p>
    <br>
    <div id="box1" class="box1-1">
        <p class="box1-1-p">这是段落1</p>
        <p>这是段落</p>
    </div>

    <form action="">
        <input type="radio" name="sex">男
        <input type="radio" name="sex">女

    </form>


<script type="text/javascript">
    // 第一种：通过id获取元素(唯一)
    var box = document.getElementById("box");
    // console.log(box);

    // 第二种：通过标签名获取(不唯一)
    // （得到的是数组）获取到的数组不能直接使用
    var p = document.getElementsByTagName("p")
    // console.log(p);
    // 只获取box1下的段落元素
    // 先获取box1,再通过box1获取段落元素
    var box1 = document.getElementById("box1");
    var p1 = box1.getElementsByTagName("p");
    // console.log(p1);

    // 第三种，通过class获取(不唯一)
    var class1 = document.getElementsByClassName("div1");
    // console.log(class1);

    // 获取box1下的box1-1-p的元素(好像不能连续两个class)
    var class2 = document.getElementById("box1");
    var p2 = class2.getElementsByClassName("box1-1-p");
    // console.log(p2);


    // 第四种，通过name属性获取元素（一般针对表单控件）
    // 这个结构，只能在文档对象下获取，只能是document.
    var myform = document.getElementsByName("sex");
    console.log(myform);




</script>


</body>
</html>